<template>
  <div class="common-form-wrapper">
    <div class="common-form-container with-bottom-sticky-button">
      <el-form ref="form" :model="form" :inline="true" :rules="rules">
        <el-row>
          <el-form-item prop="question" label="问题">
            <el-input v-model.trim="form.question" clearable />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item prop="type" label="类型">
            <el-select v-model.trim="form.type" clearable>
              <el-option v-for="item in this.$store.getters.dictSelectData.system_faq_type" :key="item.value" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
          <el-form-item prop="seq" label="排序">
            <el-input-number v-model.number="form.seq" :controls="false" />
          </el-form-item>
        </el-row>
        <!--富文本编辑器-->
        <Tinymce ref="editor" v-model="form.answer" />
      </el-form>
    </div>
    <BottomFixedButtonContainer>
      <template slot="buttons">
        <el-button :loading="submitLoading" :disabled="submitDisabled" type="primary" @click="submit">{{ isEdit ? '确认修改' : '确认提交' }}</el-button>
      </template>
    </BottomFixedButtonContainer>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { getDictSelectData } from '@/utils/common'
import { create, update, get } from '@/api/system/faq'
import BottomFixedButtonContainer from '@/components/BottomFixedButtonContainer'
export default {
  name: 'FaqDetail',
  components: { Tinymce, BottomFixedButtonContainer },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: { question: '', answer: '', type: '', seq: undefined },
      rules: {
        question: [{ required: true, message: '问题必填', trigger: 'blur' }],
        type: [{ required: true, message: '问题类型必填', trigger: 'blur' }],
        seq: [{ required: true, message: '排序号必填', trigger: 'blur' }]
      },
      currentId: '', formLoading: false, submitLoading: false, submitDisabled: false
    }
  },
  created() {
    getDictSelectData('system_faq_type').then(() => { this.loadDetail() })
  },
  methods: {
    loadDetail() {
      this.currentId = this.$router.currentRoute.query.id
      if (this.isEdit && this.currentId) {
        const ld = this.$loading()
        get(this.currentId).then(res => {
          this.form = res
          ld.close()
        })
      }
    },
    cancel() {
      this.$refs.form.resetFields()
      this.submitDisabled = false
      this.submitLoading = false
      this.currentId = ''
      this.$store.dispatch('tagsView/delViewAndBackTo', this, { path: '/system/faq' })
    },
    submit() {
      this.submitDisabled = true
      this.submitLoading = true
      if (!this.form.answer) {
        this.$message.warning('解答必填')
        this.submitDisabled = false
        this.submitLoading = false
        return
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.isEdit) {
            update(this.currentId, this.form).then(res => {
              this.cancel()
              this.$notify.success('修改成功')
            }).catch(() => {
              this.submitDisabled = false
              this.submitLoading = false
            })
          } else {
            create(this.form).then(res => {
              this.cancel()
              this.$notify.success('创建成功')
            }).catch(() => {
              this.submitDisabled = false
              this.submitLoading = false
            })
          }
        } else {
          this.submitDisabled = false
          this.submitLoading = false
          return false
        }
      })
    }
  }
}
</script>
